import { render } from 'react-dom'

const set = new Set()

const Config = (argv: any) => {
    console.log(argv)
    const { type } = argv
    const uid = `ant-${type}-${Date.now()}`
    const dom = createElem(uid)
    let className = '',
        Template,
        width = argv.width || 520
    let content = argv.content
    if (Object.prototype.toString.call(content) == '[object Object]') {
        if (!content.$$typeof) content = JSON.stringify(content)
    } else if (Object.prototype.toString.call(content) == '[object Array]') {
        let _content = content[0]
        if (!_content.$$typeof) content = JSON.stringify(content)
    }
    if (type == 'modal') {
        Template = (
            <div className='ant-modal-content'>
                <button
                    type='button'
                    aria-label='Close'
                    className='ant-modal-close'
                    onClick={() => {
                        unElem({ ...argv }, uid)
                    }}
                >
                    <span className='ant-modal-close-x'></span>
                </button>
                <div className='ant-modal-header' style={{ minHeight: '56px' }}>
                    <div className='ant-modal-title'>{argv.title}</div>
                </div>
                <div className='ant-modal-body' style={argv.style}>
                    {content}
                </div>
                <Footer tag='dialog' uid={uid} className={'ant-modal-footer'} footer={argv.footer} onOk={argv.onOk} onCancel={argv.onCancel} />
            </div>
        )
    } else {
        width = 400
        className = `ant-modal-confirm ant-modal-confirm-${type}`
        Template = (
            <div className='ant-modal-content'>
                <div className='ant-modal-body' style={argv.style}>
                    <div className='ant-modal-confirm-body-wrapper'>
                        <div className='ant-modal-confirm-body'>
                            <span role='img' aria-label='exclamation-circle' className={`anticon ${argv.icon}`}></span>
                            <span className='ant-modal-confirm-title'>{argv.title}</span>
                            <div className='ant-modal-confirm-content'>{argv.content}</div>
                        </div>
                        <Footer tag={type} uid={uid} className={'ant-modal-confirm-btns'} footer={argv.footer || true} onOk={argv.onOk} onCancel={argv.onCancel} />
                    </div>
                </div>
            </div>
        )
    }

    render(
        <div role='document' className={`ant-modal ${className}`} style={{ width: width, transformOrigin: '448.4px 259.4px' }}>
            <div tabIndex={0} aria-hidden='true' style={{ width: '0px', height: '0px', overflow: 'hidden', outline: 'none' }}></div>
            {Template}
        </div>,
        dom
    )
}

// 创建Modal容器
const createElem = (uid: string) => {
    set.add(uid)
    // 创建根目录
    const dom = document.createElement('div')
    dom.setAttribute('id', uid)
    dom.setAttribute('class', 'ant-modal-root')
    document.body.appendChild(dom)
    // 遮罩层
    const mask = document.createElement('div')
    mask.setAttribute('class', 'ant-modal-mask')
    dom.appendChild(mask)
    // 对话框容器
    const dialog = document.createElement('div')
    dialog.setAttribute('tabIndex', '-1')
    dialog.setAttribute('class', 'ant-modal-wrap')
    dialog.setAttribute('role', 'dialog')
    dom.appendChild(dialog)

    return dialog
}

const unElem = (item: any, uid: string) => {
    if (typeof item.click == 'function') item.click.call()
    set.delete(uid)
    const dom = document.getElementById(uid)
    dom && dom.remove()
}

const Footer = (argv: any) => {
    let btns = argv.footer || [
        { text: argv.okText || '取 消', type: argv.cancelType || 'default', click: argv.onCancel },
        { text: argv.okText || '确 定', type: argv.okType || 'primary', click: argv.onOk }
    ]
    if (typeof btns != 'object') {
        if (argv.tag == 'modal' || argv.tag == 'confirm') {
            btns = [
                { text: argv.okText || '取 消', type: argv.cancelType || 'default', click: argv.onCancel },
                { text: argv.okText || '确 定', type: argv.okType || 'primary', click: argv.onOk }
            ]
        } else {
            btns = [{ text: argv.okText || '知道了', type: argv.okType || 'primary', click: argv.onOk }]
        }
    }

    if (argv.footer !== null) {
        const Buttons = btns.map((item: any) => {
            return (
                <button type='button' className={`ant-btn ant-btn-${item.type || 'default'}`} onClick={() => unElem(item, argv.uid)}>
                    <span>{item.text}</span>
                </button>
            )
        })
        return <div className={argv.className}>{Buttons}</div>
    } else return null
}

export default Config
